<template>
  <div class="footer-container">
    <div class="container">
      <div class="row">
        <div class="itall col-6 col-md-2">
          <h1>能为你带来的价值</h1>
          <p @click = "likeItService">全赞服务</p>
          <p @click = "likeItSys">五大系统</p>
          <p @click = "likeItProgramme">解决方案</p>
          <p @click = "likeItCustomer">适合用户</p>
        </div>
        <div class="cooperation col-6 col-md-2">
          <h1>渠道合作</h1>
          <p @click="likeItApply">合作条件</p>
          <p @click="likeItProcess">申请流程</p>
        </div>
        <div class="aboutme col-6 col-md-2">
          <h1>关于我们</h1>
          <p @click="likeItAbout">关于我们</p>
          <p @click="likeItPhone">联系我们</p>
          <!-- <router-link :to="{path:'@pages/index/about/Content.vue?#tab'}"><a href="#phone"><p @click="likeItPhone">联系我们</p></a></router-link> -->
        </div>

      </div>
    </div>
  </div>

</template>

<script>
export default {
  data(){
    return{
      service:0,
      system:1,
      apply:3,
      about:4,
    }
  },
  methods:{
    likeItService(){
      this.$emit('homefooter',this.service)
      this.scrollWindow(500,1400)
      console.log(this.service)
    },
    likeItSys(){
      this.$emit('homesys',this.system)
      this.scrollWindow(500,800)
      console.log("cl")
    },
    likeItProgramme(){
      this.$emit('programmeFn',this.system)
      this.scrollWindow(500,3100)
      console.log("cl")
    },
    likeItCustomer(){
      this.$emit('customerFn',this.service)
      this.scrollWindow(500,1800)
      console.log("cl")
    },
    likeItApply(){
      this.$emit('applyFn',this.apply)
      this.scrollWindow(500,300)
      console.log("cl132")
    },
    likeItProcess(){
      this.scrollWindow(500,1300)
      this.$emit('processFn',this.apply)
    },
    likeItAbout(){
      this.scrollWindow(500,350)
      this.$emit('aboutmeFn',this.about)


    },
    likeItPhone(){
      this.scrollWindow(100,800)
      this.$emit('phoneFn',this.about)

    },
    scrollWindow(x,y){
      window.scrollTo(x,y);
    }
  }
}
</script>

<style scoped lang="stylus">
@media (min-width: 300px) {
  .container{
    width:90% !important
    height:300px !important
    padding-top:0 !important
    margin: 20px 5% !important
    .row{
      margin-top:50px !important
      h1{
        font-size:15px !important
        font-weight:500
      }
      p{
        font-size:10px !important
        line-height:25px !important
      }
    }

  }
}
@media (min-width: 920px) {
  .container{
    width:100% !important
    height:400px !important
    padding-top:50px !important
    margin-left:0px !important
    margin-top:0px !important
    // margin: 20px 5% !important
    .row{
        margin-top:50px !important
      h1{
        font-size:25px !important
        font-weight:500
      }
      p{
        font-size:20px !important
        line-height:50px !important
      }
    }

  }
}
  .container
    width:100%
    height:500px
    background-color:#f2f3ff
    padding-top:100px
    margin-top:20px
    .row
      display: flex
      justify-content: space-around
      margin:0 auto
      margin-top: 100px
      // margin-left: 400px
      .itall,.cooperation,.aboutme
        display: flex
        flex-direction: column
        text-align:center
        h1
          font-size:28px
          font-weight: 700
          margin-bottom: 27px
        p
          font-size:19px
          &:hover
            color: red
            cursor: pointer
</style>